<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Panel</view>
			<view class="tui-page__desc">面板，常用布局</view>
		</view>
		<view class="tui-page__bd">
			<view class="thorui-panel">
				<view class="thorui-panel__hd">图文组合列表</view>
				<view class="thorui-media-box" hover-class="thorui-cell_active" :hover-stay-time="150">
					<view class="thorui-media-box__hd"><image class="thorui-media-box__thumb" src="/static/images/layout/2.jpg" /></view>
					<view class="thorui-media-box__bd">
						<view class="thorui-media-box__title">标题一</view>
						<view class="thorui-media-box__desc">你的时间有限，不要浪费于重复别人的生活。不要让别人的观点淹没了你内心的声音。</view>
					</view>
				</view>
				<view class="thorui-media-box" hover-class="thorui-cell_active" :hover-stay-time="150">
					<view class="thorui-media-box__hd"><image class="thorui-media-box__thumb" src="/static/images/layout/1.jpg" /></view>
					<view class="thorui-media-box__bd">
						<view class="thorui-media-box__title">标题二</view>
						<view class="thorui-media-box__desc">当你的才华还撑不起你的野心时，那你就应该静下心来学习；当你的经济还撑不起你的梦想时，那你就应该踏实的去工作。</view>
					</view>
				</view>
				<tui-list-cell arrow unlined><view class="thorui-cell__link">查看更多</view></tui-list-cell>
			</view>

			<view class="thorui-panel">
				<view class="thorui-panel__hd">文字组合列表</view>
				<view class="thorui-media-box" hover-class="thorui-cell_active" :hover-stay-time="150">
					<view class="thorui-media-box__bd">
						<view class="thorui-media-box__title">标题一</view>
						<view class="thorui-media-box__desc">你的时间有限，不要浪费于重复别人的生活。不要让别人的观点淹没了你内心的声音。</view>
					</view>
				</view>
				<view class="thorui-media-box" hover-class="thorui-cell_active" :hover-stay-time="150">
					<view class="thorui-media-box__bd">
						<view class="thorui-media-box__title">标题二</view>
						<view class="thorui-media-box__desc">当你的才华还撑不起你的野心时，那你就应该静下心来学习；当你的经济还撑不起你的梦想时，那你就应该踏实的去工作。</view>
					</view>
				</view>
				<tui-list-cell arrow unlined><view class="thorui-cell__link">查看更多</view></tui-list-cell>
			</view>

			<view class="thorui-panel">
				<view class="thorui-panel__hd">小图文组合列表</view>
				<view class="thorui-media-box" hover-class="thorui-cell_active" :hover-stay-time="150">
					<view class="thorui-thumb__hd"><image class="thorui-thumb__sm" src="/static/images/layout/2.jpg" /></view>
					<view class="thorui-media-box__bd"><view class="thorui-media-box__title">文字标题</view></view>
				</view>
				<view class="thorui-media-box thorui-unlined" hover-class="thorui-cell_active" :hover-stay-time="150">
					<view class="thorui-thumb__hd"><image class="thorui-thumb__sm" src="/static/images/layout/1.jpg" /></view>
					<view class="thorui-media-box__bd"><view class="thorui-media-box__title">文字标题</view></view>
				</view>
			</view>

			<view class="thorui-panel">
				<view class="thorui-panel__hd">小图文组合列表（带箭头）</view>
				<tui-list-cell padding="0" unlined arrow>
					<view class="thorui-media-box">
						<view class="thorui-thumb__hd"><image class="thorui-thumb__sm" src="/static/images/layout/2.jpg" /></view>
						<view class="thorui-media-box__bd"><view class="thorui-media-box__title">文字标题</view></view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" unlined arrow>
					<view class="thorui-media-box thorui-unlined">
						<view class="thorui-thumb__hd"><image class="thorui-thumb__sm" src="/static/images/layout/1.jpg" /></view>
						<view class="thorui-media-box__bd"><view class="thorui-media-box__title">文字标题</view></view>
					</view>
				</tui-list-cell>
			</view>

			<view class="thorui-panel">
				<view class="thorui-panel__hd">文字列表附来源</view>
				<view class="thorui-media-box" hover-class="thorui-cell_active" :hover-stay-time="150">
					<view class="thorui-media-box__bd">
						<view class="thorui-media-box__title">标题一</view>
						<view class="thorui-media-box__desc">你的时间有限，不要浪费于重复别人的生活。不要让别人的观点淹没了你内心的声音。</view>
						<view class="thorui-media-box__info">
							<view class="thorui-info__meta">腾讯新闻网</view>
							<view class="thorui-info__meta">10-21 09:00</view>
							<view class="thorui-info__extra">其它信息</view>
						</view>
					</view>
				</view>
				<view class="thorui-media-box thorui-unlined" hover-class="thorui-cell_active" :hover-stay-time="150">
					<view class="thorui-media-box__bd">
						<view class="thorui-media-box__title">标题一</view>
						<view class="thorui-media-box__desc">你的时间有限，不要浪费于重复别人的生活。不要让别人的观点淹没了你内心的声音。</view>
						<view class="thorui-media-box__info">
							<view class="thorui-info__meta">文字来源</view>
							<view class="thorui-info__meta">时间</view>
							<view class="thorui-info__extra">其它信息</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style>
.thorui-panel {
	margin-bottom: 30rpx;
}
</style>
